<template>

  <user-list-card :user-list="userList" :loading="loading"></user-list-card>
  <van-empty description="查询内容为空" v-if="!loading && userList.length < 1 || !userList"></van-empty>

</template>

<script setup>
import {ref, onMounted} from "vue";
import {useRoute} from "vue-router";
import {showSuccessToast, showFailToast} from 'vant';
import UserListCard from "../components/UserListCard.vue";
import {getUserSearchTags} from "../api/User.js";


const route = useRoute();
const {tags} = route.query;

const userList = ref([]);
const loading = ref(false);

// 钩子函数
onMounted(async () => {
  loading.value = true;
  const userListResult = await getUserSearchTags(tags)
      .then(function (response) {
        // 处理成功情况
        showSuccessToast("加载成功")
        console.log("/user/search/tags success" + response);
        return response?.data;
      })
      .catch(function (error) {
        // 处理错误情况
        console.log("/user/search/tags error" + error);
        showFailToast('加载失败');
      })
  if (userListResult) {
    userListResult.forEach(user => {
      user.tags = JSON.parse(user.tags);
    })
  }

  userList.value = userListResult;
  loading.value = false;
});


</script>

<style scoped>
.custom-desc {
  margin: 10px 0;
}
</style>